<div>
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">

    <!-- This is the tree node template for leaf nodes -->
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
      <li *ngIf="isParentRendered(node)" class="file-node mat-tree-node">
        <!-- use a disabled button to provide padding for tree leaf -->
        <button mat-icon-button disabled><mat-icon color="accent">file_copy</mat-icon></button>
        <div class="node-info">
          <div id="node-title">
            {{node.name}}
          </div>

          <div class="grow">
            <div id="progress" *ngIf="showProgress">
              Done: {{getNodeProgress(node)}}%
            </div>

            <div id="fileSize">
              {{getNodeSize(node)}}
            </div>
          </div>
        </div>
      </li>
    </mat-tree-node>

    <!-- This is the tree node template for expandable nodes -->
    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
      <li *ngIf="isParentRendered(node)" class="directory-node">
        <div (click)="toggleNode(node)" matRipple matTreeNodeToggle class="mat-tree-node">
          <button mat-icon-button matTreeNodeToggle id="expand_folder_button"
                  [attr.aria-label]="'toggle ' + node.name">
            <mat-icon class="mat-icon-rtl-mirror">
              {{isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          <div class="node-info">
            <div id="node-title">
              {{node.name}}
            </div>

            <div class="grow">
              <div id="progress" *ngIf="showProgress">
                Done: {{getNodeProgress(node)}}%
              </div>

              <div id="fileSize">
                {{getNodeSize(node)}}
              </div>
          </div>
          </div>
        </div>
        <ul [class.tree-invisible]="!isExpanded(node)">
          <ng-container matTreeNodeOutlet></ng-container>
        </ul>
      </li>
    </mat-nested-tree-node>
  </mat-tree>
</div>
